import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select
} from 'antd'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useSearchParams } from 'react-router-dom'
import './index.scss'
import { publishApi, getArticleSpecificApi, updateArticleApi } from '@/apis/article'
import { useEffect, useState } from 'react'
import { useChannel } from '../../hooks/useChannel'

const { Option } = Select

const Publish = () => {
    const { channels } = useChannel()
    const [radioValue, setRadioValue] = useState(0)
    const [fileList, setFileList] = useState([])
    const [form] = Form.useForm()

    const radioChange = (e) => {
        setRadioValue(e.target.value)
    }

    const onUploadChange = (e) => {
        setFileList(e.fileList)
    }

    //表单数据回填
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    useEffect(() => {
        if (articleId) {
            getArticleSpecificApi(articleId)
                .then(res => {
                    const data = res.data
                    const { cover } = data
                    form.setFieldsValue(res.data)
                    setRadioValue(cover.type)
                    const url = cover.images.map(url => ({ url }))
                    setFileList(url)
                })
        } else {
            form.resetFields()
            setRadioValue(0)
            setFileList([])
        }
    }, [articleId, form])

    //表单提交
    const submitPublish = async (value) => {
        const newValue = {
            ...value,
            cover: {
                type: radioValue,
                images: fileList.map(item => {
                    if (articleId) {
                        return item.url
                    } else {
                        return item.response.data.url
                    }
                })
            }
        }
        if (articleId) {
            await updateArticleApi({ ...newValue, id: articleId });
        } else {
            await publishApi(newValue)
        }
        form.resetFields()
        setRadioValue(0)
        setFileList([])
    }

    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        // { title: '发布文章' },
                        { title: `${articleId ? '编辑' : '发布'}文章` }
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={submitPublish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channels && channels.map(item => (
                                <Option key={item.id} value={item.id} >{item.name}</Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="封面"
                        channel="radio_type"
                        rules={[{ required: true, message: '请选择封面类型' }]}
                    >
                        <Radio.Group onChange={radioChange} value={radioValue}>
                            <Radio value={1}>单图</Radio>
                            <Radio value={3}>三图</Radio>
                            <Radio value={0}>无图</Radio>
                        </Radio.Group>
                        {radioValue > 0 &&
                            <Upload
                                name="image"
                                listType="picture-card"
                                showUploadList
                                action={'http://geek.itheima.net/v1_0/upload'}
                                onChange={onUploadChange}
                                maxCount={radioValue}
                                fileList={fileList}
                            >
                                <div style={{ marginTop: 8 }}>
                                    <PlusOutlined />
                                </div>
                            </Upload>}
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div >
    )
}

export default Publish